<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <title>Bootstrap 测试实例</title>

    <!-- 新 Bootstrap4 核心 CSS 文件 -->
    <link rel="stylesheet" href="vender/bootstrap-4.3.1-dist/css/bootstrap.min.css">
    <!-- 新 swiper 核心 CSS 文件 -->
    <link rel="stylesheet" href="vender/swiper-4.5.0/css/swiper.min.css">

    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
    <script src="vender/jquery-3.4.1/jquery.min.js"></script>
    <!-- popper.min.js 用于弹窗、提示、下拉菜单 -->
    <script src="vender/popper/popper.min.js"></script>
    <script src="vender/tooltip/tooltip.min.js"></script>
    <!-- 最新的 Bootstrap4 核心 JavaScript 文件 -->
    <script src="vender/bootstrap-4.3.1-dist/js/bootstrap.min.js"></script>
    <!-- 最新的 swiper 核心 JavaScript 文件 -->
    <script src="vender/swiper-4.5.0/js/swiper.min.js"></script>
    <!-- 最新的 VUE JavaScript 文件 -->
    <script src="vender/vue-2.6.10/vue.min.js"></script>
</head>
<body>
<div class="row">
    <div class="col-md-12">
        <div class="swiper-container" style="width: auto;height: 260px;">
            <!-- Additional required wrapper -->
            <div class="swiper-wrapper">
                <!-- Slides -->
                <div class="swiper-slide text-center"><img class="img-fluid" src="img/banner1.jpg" alt=""></div>
                <div class="swiper-slide text-center"><img class="img-fluid" src="img/banner2.jpg" alt=""></div>
                <div class="swiper-slide text-center"><img class="img-fluid" src="img/banner3.jpg" alt=""></div>
                <div class="swiper-slide text-center"><img class="img-fluid" src="img/banner4.jpg" alt=""></div>
            </div>
            <!--If we need pagination-->
            <div class="swiper-pagination"></div>

            <!--If we need navigation buttons-->
            <!--<div class="swiper-button-prev"></div>-->
            <!--<div class="swiper-button-next"></div>-->

            <!--If we need scrollbar-->
            <!--<div class="swiper-scrollbar"></div>-->
        </div>
    </div>
</div>
<script>
    var mySwiper = new Swiper ('.swiper-container', {
        // Optional parameters
        direction: 'horizontal',
        loop: true,

        // If we need pagination
        pagination: {
            el: '.swiper-pagination',
        },

        // Navigation arrows
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },

        // And if we need scrollbar
        scrollbar: {
            el: '.swiper-scrollbar',
        },
    })
</script>
</body>
</html>